<template>
  <el-container class="stringcasedetail">
    <!-- 头部区域 -->
    <el-header>
        <el-row>
            <el-col :span="22">
                <div class="grid-content bg-purple">
                    <el-row :gutter="20">
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                                <el-button type="info" @click="gostringcase">返回上一级</el-button>
                            </div>
                        </el-col>
                        <el-col :span="16">
                            <div class="grid-content bg-purple">
                                <h3 class="middle">{{cabxxlist['CBAMC']}} {{$route.query.id}}</h3>
                            </div>
                        </el-col>
                         <!-- <el-col :span="6">
                            <div class="grid-content bg-purple">
                                
                                <h3 class="middle"></h3>
                            </div>
                        </el-col> -->
                    </el-row>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple">
                  <el-button type="info" plain>添加案件</el-button>
                </div>
            </el-col>
        </el-row>
    </el-header>
    <!-- 主体区域 -->
    <el-main>
        <el-card>
          <!-- 基本信息布局 -->
          <el-container>
            <el-header >
             <h3>基本信息</h3>
            </el-header>
            <!-- 基本信息和饼图 -->
            <el-main>
                <el-container style="height:220px">
                  <!-- 左侧基本信息详情 -->
                  <el-aside class="chuanDetails" width="700px">
                     <ul>
                       <li><span>串并案名称:</span><i>{{cabxxlist['CBAMC']}}</i></li>
                       <li><span>串并依据:</span><i>{{cabxxlist['CBYJ']}}</i></li>
                       <li><span>串并案件:</span><i>{{cabxxlist['AJS']}}</i></li>
                       <li><span>作案时段:</span><i>{{sjlist['AFSJ_MIN'] | dateFormat}}  —  {{sjlist['AFSJ_MAX'] | dateFormat}}</i></li>
                       <li><span>立案单位:</span><i class="txt yinc">{{cabxxlist['LADWS']}}</i></li>
                     </ul>
                  </el-aside>
                  <el-main >
                    <!-- 为ECharts地图准备一个具备大小（宽高）的Dom -->
                      <div id="main" style="" class="pie"></div>
                  </el-main>
              </el-container>
            </el-main>
            <!-- <el-footer>
              <div id="XSDFXPage" class="XSDFXPage"></div> 
            </el-footer> -->
          </el-container>
        </el-card>
        <!-- 案件信息 -->
        <el-card>
          <h3>案件信息</h3>
          <el-table :data="cbatableList" style="width: 100%"  > 
              <el-table-column prop="AJBH" label="案件编号" align="center" show-overflow-tooltip>
                <template  slot-scope="scope">
                  <span class="viewdetails" @click="gocasedetail(scope.row.AJBH)">{{scope.row.AJBH}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="AJMC" label="案件名称" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column prop="AJLB" label="案件类型" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column prop="AJZT" label="案件状态" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column label="案发开始时间" align="center" show-overflow-tooltip >
                <template slot-scope="scope">
                    <span>{{scope.row.AFSJ_KS | dateFormat}}</span>
                </template>
              </el-table-column>
               <el-table-column label="立案时间" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{scope.row.LASJ | dateFormat}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="LADW" label="立案单位" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column  label="接警时间" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{scope.row.JJSJ | dateFormat}}</span>
                </template>
              </el-table-column>
              <el-table-column   align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span  class="viewdetails" @click="gocasedetail(scope.row.AJBH)" >查看详情</span>
                </template>
              </el-table-column>
            </el-table>
            <!-- 案件信息列表分页 -->
        </el-card>
        <!-- 特征命中信息 -->
        <!-- <el-card>
          <h3>特征命中信息（共命中 2 个群体，1 个团伙，5 名前科人员）</h3>
          <span>作案手段：</span><i>技术开锁</i>
          <span>作案特征：</span><i>大门上锁；物品被翻动；开锁发现异常</i>
          <ul>
            <li class="FeatureHit">
              <div class="FeatureHitInfo ">
                <p><span>云南昭通籍入室盗窃群体</span></p>
                <p><span>(3)人</span></p>
                <p><span>(命中23人)</span></p>
              </div>
            </li>
            <li class="FeatureHit"></li>
            <li class="FeatureHit"></li>
            <li class="FeatureHit"></li>
            <li class="FeatureHit"></li>
            <li class="FeatureHit"></li>
            <li class="FeatureHit"></li>
          </ul>
        </el-card> -->
        <!-- 操作日志 -->
        <!-- 操作日志 -->
    <el-card class="box-card">
        <h4>操作日志</h4>
        <el-table
        :data="tableData"
        style="width: 100%">
            <el-table-column  align="center" show-overflow-tooltip type="index" label="序号"  width="180"></el-table-column>
            <el-table-column  align="center" show-overflow-tooltip prop="date"  label="操作时间" width="180"></el-table-column>
            <el-table-column  align="center" show-overflow-tooltip prop="name"  label="操作人" width="180"></el-table-column>
            <el-table-column  align="center" show-overflow-tooltip prop="address" label="操作内容"></el-table-column>
        </el-table>
    </el-card>
    </el-main>
</el-container>
</template>

<script>
import echarts from "echarts";
export default {
  name:'',
  data () {
    return {
        tableData: [],
        // 基本信息
        cabxxlist:{},
        // 时间
        sjlist:{},
        // 案件信息 
        cbatableList:[],
    }
  },

  methods: {
    initEcharts(data){
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
          {
            name:'',
            type:'pie',
            color: [ '#526bb7', '#228ea3', '#4055bd', '#bfc96c', '#4a33bb', '#2f71c1', '#bb4a53', '#25b1b6', '#839834', '#2b40b4', '#297c67', '#5c35b8', '#5872b2', '#9d47b9', '#26bc77', '#4055bd', '#3d7ccf', '#ae6345'],
            radius: ['50%', '70%'],
            selectedMode: 'single',
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:data.wpa, name:'未破案'},
                {value:data.ypa, name:'已破案'}
            ]
          }
        ]
      }
       myChart.setOption(option);
    },
    baiduapi(){
      // var map = new BMap.Map("baidu");
      // // 创建地图实例  
      // var point = new BMap.Point(116.404, 39.915);
      // // 创建点坐标  
      // map.centerAndZoom(point, 15);
      // // 初始化地图，设置中心点坐标和地图级别 
      // 百度地图API功能
           
    },
    gostringcase(){
      this.$router.go('-1')
    },
     // 根据案件编号查询案件
    gocasedetail(id){
      this.$router.push({
        path:'/casefiledetail',
        query:{
          id:id
        }
      })
    },
    // 查询案件串并信息接口
    async getstringcasedetail(){
        const res = await this.axios.get('/ynzc/ajcp/getAjcpxx?cbabh='+this.$route.query.id)
        console.log(res); 
        // var arr = []
        var obj ={}
        if(res.data.status==200){
            this.cbatableList = res.data.results.data.cbaList
            this.cabxxlist =res.data.results.data.cbaxx
            this.sjlist =res.data.results.data.zasd
            obj=res.data.results.data.cbaxx.ajztCount
            // for ( var key in obj){
            //   arr.push(obj)
            // }
       
          this.initEcharts(obj)  
        }
        console.log(this.initEcharts);
    },
   
   
   
},

  created () {
    this.getstringcasedetail()
  },
  mounted(){
    this.initEcharts()
    this.baiduapi()
  }
}
</script>

<style lang='less' scoped>
  .el-row {
    margin-bottom: 20px;
     &:last-child {
      margin-bottom: 0;
     }
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .stringcasedetail {
    font-size: 14px;
  }
  .el-header {
    margin-bottom: 10px;
  }
  .middle{
      line-height: 10px;
  }
  .chuanDetails ul{
    padding: 0 ;
    margin: 0;
  }
  .chuanDetails ul li span {
    font-size: 14px;
    font-weight: 400;
    margin-right: 15px;
  }
  .chuanDetails ul li i {
    color :red;
  }
  
  .XSDFXPage {
    height: 300px;
    width: 100%;
    overflow: hidden;
    margin: 0;
    font-family: "微软雅黑"
  }
  .FeatureHit {
    float: left;
    width: 240px;
    height: 300px;
    margin: 20px;
    border: 1px solid #ccc;
  }
  .FeatureHitInfo {
    position: relative;
    top: 216px;
    text-align: center;
    font-size: 12px;
    background-color:rgba(0,0,0,.6);
    display: none;
  }
  .FeatureHit:hover .FeatureHitInfo {
    display: block;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 700;
    width: 100%;
  }
  .demo-table-expand .el-form-item span {
    font-weight: normal;
  }
  .viewdetails {
    color: blue;
  }
  .pie {
    width: 300px;
    height:220px;
    position: relative;
    top: -20px;
  }
  .yinc {
    overflow-x: hidden;
  }
</style>
